<template>
  <div id="app">
    <nav class="nav-top">
      <!-- logo -->
      <div class="logo">圆梦壁纸</div>
      <!-- 英文描述 -->
      <div class="desc-en">Yuanmeng Wallpaper</div>
      <!-- 切换栏 -->
      <div class="change-tabs">
        <!-- 左边导航 -->
        <router-link :to="item.path"
                     :id="item.clss"
                     class="yuan-tab"
                     :class="{focusColor: item.id==$route.meta.id}"
                     v-for="item in leftTab"
                     :key="item.id">
          <span>
            <i :class="`el-icon-${item.icon} yuan-icon`"></i>
            {{item.text}}
          </span>
        </router-link>
        <!--  个人中心 -->
        <router-link v-show="islogin || istoken"
                     :to="person.path"
                     :id="person.clss"
                     class="yuan-tab"
                     @mouseenter.native="mouseOver"
                     @mouseleave.native="mouseOut"
                     :class="{focusColor:person.id==$route.meta.id}">
          <span>
            <i :class="`el-icon-${person.icon} yuan-icon`"></i>
            {{person.text}}
          </span>
          <div class="drop-dowm"
               v-if="isShowDropDown">
            <ul>
              <li @click="loginout">退出登录</li>
            </ul>
          </div>
        </router-link>
        <!--    登录 -->
        <router-link v-show="!islogin && !istoken"
                     :to="logins.path"
                     :id="person.clss"
                     class="yuan-tab"
                     :class="{focusColor:logins.id==$route.meta.id}">
          <span>
            <i :class="`el-icon-${logins.icon} yuan-icon`"></i>
            登录
          </span>
        </router-link>
        <!-- 关于 -->
        <router-link :to="aboouts.path"
                     class="yuan-tab"
                     :class="{focusColor:aboouts.id==$route.meta.id}">
          <span>
            <i :class="`el-icon-${aboouts.icon} yuan-icon`"></i>
            {{aboouts.text}}
          </span>
        </router-link>
      </div>
    </nav>
    <transition enter-active-class="animate__animated animate__fadeIn">
      <router-view />
    </transition>
  </div>
</template>
<script>
import '@/assets/css/app.css'
import { removeToken,getToken } from '@/utils/token'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      // 左侧导航
      leftTab: [
        { id: 1, path: '/', clss: '', icon: 'house', text: '首页' },
        { id: 2, path: '/search', clss: '', icon: 'search', text: '搜索' },
        { id: 3, path: '/collection', clss: '', icon: 'star-off', text: '收藏' }
      ],
      //个人中心
      person: { id: 4, path: '/person', clss: 'yuan-flaot-right', icon: 'user', text: '个人' },
      //登录
      logins: { id: 5, path: '/login', clss: 'yuan-flaot-right', icon: 'key', text: '登录' },
      //关于
      aboouts: { id: 6, path: '/concern', clss: '', icon: 'warning-outline', text: '关于' },
      isShowDropDown: false,
      istoken:getToken()
    }
  },
  methods: {
    loginout() {
      console.log('退出登录')
      removeToken()
      this.$store.commit('changeLoginStatus',false)
      window.location.reload()
    },
    // 移入
    mouseOver() {
      this.isShowDropDown = true
    },
    //移出
    mouseOut() {
      this.isShowDropDown = false
    }
  },
  computed:{
    ...mapState(['islogin'])
  }
}
</script>

<style lang="less" scoped>
#app {
  overflow-x: hidden;
}

/* tab选中样式 */
.focusColor {
  color: #71c9ce;
  border: 2px solid transparent;
  border-bottom: 2px solid #71c9ce;
}
.nav-top {
  padding: 0 30px 0 10px;
  display: flex;
  align-items: center;
  height: 50px;
  color: rgba(0, 0, 0, 0.64);
  background-color: #f5f5f5;
  box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%);

  /* logo */
  .logo {
    padding: 0 5px;
    letter-spacing: 4px;
    font-weight: 550;
  }
  /* 英文描述 */
  .desc-en {
    margin: 0 20px;
    font-size: 9px;
  }
  /* 切换栏盒子 */
  .change-tabs {
    display: flex;
    align-items: center;
    flex: 1 0 auto;
    height: 100%;
    font-size: 14px;
    /* 单个切换栏 */
    .yuan-tab {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      min-width: 90px;
      height: 50px;
      letter-spacing: 3px;
      box-sizing: border-box;
      .yuan-icon {
        padding-right: 3px;
        font-weight: 600;
      }
      &:hover {
        background: rgb(240, 240, 240);
      }
      .drop-dowm {
        margin-top: 40px;
        z-index: 99;
        position: absolute;
        top: 0;
        left: 0;
        height: 50px;
        width: 85px;
        ul {
          padding-top: 20px;
          li {
            width: 100%;
            height: 35px;
            line-height: 35px;
            text-align: center;
            color: red;
            background-color: #fff;
            border-radius: 2px;
            font-size: 13px;
            cursor: pointer;
          }
        }
      }
    }
    #yuan-flaot-right {
      margin-left: auto;
    }
  }
}
</style>
